<template>
  <div>
    <!-- <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item,index) in pics" :key="index">
          <img :src="item" style="object-cover:fit" referrerPolicy="no-referrer"/>
        </el-carousel-item>
      </el-carousel> -->
    <el-alert
      title="科学的症状分析"
      description="旨在通过采集患者的症状病情来选择最适合进行就诊的科室！"
      type="success"
      center
      :closable="false"
      show-icon


      style="margin-bottom:20px"
    />
    <!-- 自行选择科室 -->
    <!-- <el-row>
      <el-col
        style="margin-top:10px;width:600px"
        @click.native="MyChoice"
      >
        <el-alert
          title="你可以输入自己的症状遵循推荐的科室，也可以自行选择科室进行挂号！可以点击我快速跳转哦"
          type="warning"
          effect="light"
          :closable="false"
        />
      </el-col>
    </el-row> -->
    <el-row>
      <el-col>
        <el-form :inline="true" :model="form" class="demo-form-inline" :rules="formRule">
          <el-row>
            <el-form-item label="患病部位：">
              <el-input v-model="form.position" />
            </el-form-item>
            <el-form-item label="症状：" style="margin-right:60px" prop="sysmptomStr">
              <el-input
                v-model="form.sysmptomStr"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                maxlength="50"
                show-word-limit
                placeholder="请输入你的症状"
                @input="debounctInputTxt"
                @keyup.enter="onSubmit"
              />
            </el-form-item>
            <!-- <el-form-item label="搜索科室">
            <el-autocomplete
              ref="autoInput"
              v-model="state1"
              class="inline-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            ><i
              slot="suffix"
              class="el-icon-edit el-input__icon"
              @click="handleIconClick"
            />
            </el-autocomplete>
          </el-form-item> -->
            <!-- <el-form-item label="推荐医生">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-row>
           <!-- 选择就诊科室 -->
          <el-row style="margin-top:10px">
            <el-form-item label="选择就诊科室：">
              <el-select v-model="form.Id" clearable placeholder="请选择就诊科室" :disabled="form.depId !=='' ">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.depName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <!-- 推荐科室 -->
          <el-row style="margin-top:20px">
            <el-form-item v-show="departmentShow" label="推荐科室：">
              <el-row>
                <el-radio-group v-model="form.depId" :disabled="form.Id !=='' ">
                  <el-radio v-for="item in options1" :key="item.depId" :label="item.depId"  border style="margin:3px">{{ item.depName }}</el-radio>
                </el-radio-group>
              </el-row>
            </el-form-item>
          </el-row>
         
          <!-- 选择科室后的提交 -->
          <el-row v-show="form.depId !=='' || form.Id !=='' ">
            <el-form-item>
              <el-button type="primary" @click="departmentBtn">提交</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

    <!-- 推荐医生 -->
    <el-row v-if="doctorShow">
      <el-row type="flex" justify="center">
      <span style="color:red" v-if='doctorList.length===0 '>暂时无推荐医生，不好意思！</span>
      </el-row>
      <h3 v-if='doctorList.length!==0 '>请选择推荐医生</h3>
      <div class="flexCard">
        <div v-for="obj in doctorList" :key="obj.id">
          <el-card style="margin:3px;width:620px" :class="{ choiceCard : isChoice === obj.id }">
            <recommended-doctor @click.native="choiceDoctor(obj.id, obj.consultationRoomId)" :obj="obj"/>
          </el-card>
        </div>
      </div>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="margin-left:13px" @click="btnOk">确认挂号</el-button>
      </el-row>
    </el-row>
    
  </div>
</template>

<script>
import recommendedDoctor from './recommendedDoctor.vue'
import RecommmendedDoctor from './recommendedDoctor.vue'
import { getAllDepName,recoDepartment,recoDoctorById,registered } from '@/api/user'
export default {
  name: 'InputSymptom',
  components: { recommendedDoctor },
  data() {
    return {
      departmentShow: false, // 科室展示
      doctorShow: false, // 医生展示
      isChoice: -1, // 判断选择哪个医生，谁有边框
      form: {
        sysmptomStr: '',
        region: '',
        position: '', // 患病部位
        depId: '', // 就诊科室
        value:'',
        Id:''
      },
      formRule: {
        sysmptomStr: [
          { required: true, message: '请输入你的症状', trigger: 'blur' }
        ]
      },
      options1:[], // 推荐科室
      options: [], // 所有科室
      restaurants: [],
      doctorList:[], // 医生信息
      symptomList:[], // 分词症状
      consultationRoomId:''
      // state1: '',
      // pics: ['https://www.baidu.com/link?url=67FMQiurzmDMeSCSG4wzmnJrQ3y-nM8PTDnQ9kN4W5pdZaJCzNo_BWr0xj6zWIgT9_7fQkmeRR7s6M9H4vbeBrWndENiAAz0m9oA9tr2dZKvAOI_P5sH7VvIwiv31l1Jta7ixJiZ9sSvGdvva9buY04TwWR0UCznxQ9BmFBEdIPNQVwVThvnMnm3No9FfFbuFLUNl7ChxM_CooMn_sNX0VE0LsYNMD9nPtDXBSaVFyB_IGFP6QrePcBs2gvIwQXBEa1yvETFuAGJ2lJJiXly-uJX6VLixIqsMsZZppfPBajeAedpc0jKDV6_usC2_OreNNsBVUizgOMIHQXqngLdnb6IiBSFFnVnin34JVAZcF6McPIPOvlhMVOreMY94GGOVSxzdU7o4Nl644RlTdxk34kEIXNN3WO0_kbGPxcjL97TPClqaPGkCjMulBFEqb-nXqrTnHa7PUv94NHSXrOePOVQcPvRu2e61bKxokQnxcSRFEw75-MkKeIfPSuCmYMb6pXiDtQSqykAgJ0quhv0O2lKXWosuiqnMBYwrYB3ckzGUq6bjEOCcN2KQ9cLJ1SXasVXXB11Hb5QiTYIfgYj97HQ-FQw-Fv32l9d-TnlpC2rX0gmwmDYCZYMNrsdMDSxej3q1k5VbabbDQW3qm3Cw7_ytdixrk_fuqJvJGdsdF7&wd=&eqid=d2dc0b89002dcb89000000046269ee63']
    }
  },
  created(){
    this.getAllDepName()
  },
  methods: {
    // 获取所有科室
   async getAllDepName(){
      this.options = await getAllDepName()
    },
    // 输入症状后的确定
  async  onSubmit() {
      this.departmentShow = !this.departmentShow
      try {
        const { depList,symptomList } =  await recoDepartment(this.form.sysmptomStr)
        this.options1 = depList
        this.symptomList = symptomList
      } catch (error) {
        // console.log(error)
        this.$message.error(error)
      }
    },
    // 选择科室后的 推荐医生
   async departmentBtn() {
      this.doctorShow = !this.doctorShow
     try {
         let id = this.form.depId == '' ? this.form.Id : this.form.depId
         this.doctorList = await recoDoctorById(id)
     } catch (error) {
        this.$message.error(error)

     }
    },
    handleSelect(item) {
      console.log(item)
    },
    querySearch(queryString, cb) {
      const restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleIconClick(ev) {
      this.$refs.autoInput.focus()
    },
    // 症状输入
    inputTxt() {
      console.log('触发')
    },
    // 症状输入的防抖函数
    debounctInputTxt() {
      if (this.timer) clearInterval(this.timer)
      this.timer = setTimeout(() => {
        this.inputTxt()
      }, 900)
    },
    // 自行选择科室进行挂号
    MyChoice() {
      this.$emit('choiceTabs', '2')
    },
    // 选择医生卡片
    choiceDoctor(id,id1) {
      // 让当前卡片的 isChoice 等于当前的id
      this.isChoice = id
      this.consultationRoomId = id1
      // this.btnOk(id,id1)
      // console.log(id,id1)
    },
    // 确认挂号
   async btnOk() {
    let departmentId = this.form.Id == '' ? this.form.depId : this.form.Id
    try {
      await registered({
      depId:departmentId,
      doctorId:this.isChoice,
      consultationRoomId:this.consultationRoomId,
      symptom:JSON.stringify(this.symptomList),
      position:this.form.position,
      userSymptom:this.form.sysmptomStr
    })
    this.$message.success('挂号成功！')
    } catch (error) {
      this.$message.error(error.message)
    }
    
  },
}
}
</script>

<style scoped lang='scss'>
.choiceCard{
  border:1px solid rgb(50, 139, 218)
}
.flexCard{
    margin: 5px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
::v-deep .el-form-item__content{
  line-height: 7px;
  position: relative;
  font-size: 14px;
}
::v-deep .el-textarea__inner{
  width:300px
}
::v-deep .el-form-item{
  margin-bottom:0
}
::v-deep .el-carousel__item img{
  width:100%;
  height: 100%;
}
::v-deep .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
</style>
